<template>
  <div class="order box">
    <div class="ordercontainer clmstart">
      <div class="backbox">
        <img
          src="@/assets/img/back.png"
          class="goback"
          @click="$router.replace('/mine')"
        />
      </div>
      <div class="orderbox clmstart">
        <!-- title -->
        <img src="@/assets/img/bg_panel.png" class="person_title" />
        <img src="@/assets/img/person_head.png" class="person_head" />
        <!-- 内容 -->
        <div class="content">
          <div class="contentinfo clmstart">
            <p class="title">-我的订单-</p>
            <!-- 产品、礼品 -->
            <div class="orderlist" v-if="orderlist.length > 0">
              <div class="order_item" v-for="item in orderlist" :key="item.id">
                <!-- 订单编号 -->
                <div class="order_item_cont order_item_no">
                  <p class="orderid">订单编号：{{ item.out_trade_no }}</p>
                </div>
                <!-- 详细信息 -->
                <div class="order_item_cont">
                  <div class="order_item_left">
                    <div class="pro_box">
                      <div class="pro_bg"></div>
                      <img :src="item.poster_url" />
                    </div>
                  </div>
                  <div class="order_item_right">
                    <div class="topt">
                      <p class="topt_title">购买商品：</p>
                      <div class="topt_info">
                        <span>{{ item.goods_title }}</span>
                        <span>x{{ item.number }}</span>
                      </div>
                    </div>
                    <div class="topt">
                      <p class="topt_title">下单日期：</p>
                      <div class="topt_info">
                        <span>{{ item.update_at }}</span>
                      </div>
                    </div>
                    <div class="topt" v-if="item.status == 2">
                      <p class="topt_title">物流单号：</p>
                      <div class="topt_info">
                        <span>{{ item.express_no }}</span>
                      </div>
                    </div>
                    <div class="topt topt_status">
                      <p class="topt_title">订单状态：</p>
                      <div class="topt_info">
                        <span v-if="item.status == 0">未支付</span>
                        <span v-else-if="item.status == 1">支付成功</span>
                        <span v-else-if="item.status == 2">已发货</span>
                        <span v-else-if="item.status == -1">已退款</span>
                        <span v-else-if="item.status == -2">退款审核中</span>
                        <span v-else-if="item.status == -3">订单取消</span>
                        <span v-else-if="item.status == -4"
                          >退款审核不通过</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 操作按钮 -->
                <div
                  class="order_item_cont order_item_btn"
                  v-if="item.status == 1"
                >
                  <img
                    src="@/assets/img/btn_updateaddr.png"
                    class="btn_updateaddr"
                    @click="
                      updateAddr(
                        item.id,
                        item.receiver,
                        item.phone,
                        item.address
                      )
                    "
                  />
                  <img
                    src="@/assets/img/btn_return.png"
                    class="btn_return"
                    @click="toRefund(item.id, item.status, 'gift')"
                  />
                </div>
                <!-- 重新支付 -->
                <div
                  class="order_item_cont order_item_btn"
                  v-if="item.status == 0"
                >
                  <img
                    src="@/assets/img/btn_updateaddr.png"
                    class="btn_updateaddr"
                    @click="
                      updateAddr(
                        item.id,
                        item.receiver,
                        item.phone,
                        item.address
                      )
                    "
                  />
                  <img
                    src="@/assets/img/btn_payagain.png"
                    class="btn_payagain"
                    @click="Pay(item.out_trade_no, item.noncestr)"
                  />
                </div>
              </div>
            </div>
            <!-- 保养套餐 -->
            <div class="orderlist" v-if="carelist.length > 0">
              <div class="order_item" v-for="item in carelist" :key="item.id">
                <!-- 订单编号 -->
                <div class="order_item_cont order_item_no">
                  <p class="orderid">订单编号：{{ item.out_trade_no }}</p>
                </div>
                <!-- 详细信息 -->
                <div class="order_item_cont">
                  <div class="order_item_left">
                    <div class="pro_box">
                      <div class="pro_bg"></div>
                      <img :src="item.poster_url" />
                    </div>
                  </div>
                  <div class="order_item_right">
                    <div class="topt">
                      <p class="topt_title">购买商品：</p>
                      <div class="topt_info">
                        <span>{{ item.care_title }}</span>
                        <span>x{{ item.number }}</span>
                      </div>
                    </div>
                    <div class="topt">
                      <p class="topt_title">下单日期：</p>
                      <div class="topt_info">
                        <span>{{ item.update_at }}</span>
                      </div>
                    </div>
                    <div class="topt">
                      <p class="topt_title">核销门店：</p>
                      <div class="topt_info">
                        <span>{{ item.store_name }}</span>
                      </div>
                    </div>
                    <div class="topt topt_status">
                      <p class="topt_title">订单状态：</p>
                      <div class="topt_info">
                        <span v-if="item.status == 0">未支付</span>
                        <span v-else-if="item.status == 1">待核销</span>
                        <span v-else-if="item.status == 2">已核销</span>
                        <span v-else-if="item.status == -1">已退款</span>
                        <span v-else-if="item.status == -2">退款审核中</span>
                        <span v-else-if="item.status == -3">订单取消</span>
                        <span v-else-if="item.status == -4"
                          >退款审核不通过</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 操作按钮 待核销 -->
                <div
                  class="order_item_cont order_item_btn"
                  v-if="item.status == 1"
                >
                  <img
                    src="@/assets/img/btn_hx.png"
                    class="btn_updateaddr"
                    @click="toHx(item.qrcode)"
                  />
                  <img
                    src="@/assets/img/btn_return.png"
                    class="btn_return"
                    @click="toRefund(item.id, item.status, 'care')"
                  />
                </div>
                <!-- 重新支付 -->
                <div
                  class="order_item_cont order_item_btn"
                  v-if="item.status == 0"
                >
                  <img
                    src="@/assets/img/btn_payagain.png"
                    class="btn_payagain"
                    @click="Pay(item.out_trade_no, item.noncestr)"
                  />
                </div>
                <!-- tips -->
                <div class="order_item_cont order_item_tips">
                  <p><span>*</span>如需更换门店，请联系人工客服</p>
                </div>
              </div>
            </div>
            <div class="nodata" v-else>
              <p>-暂无数据-</p>
            </div>
          </div>
        </div>
        <img src="@/assets/img/person_foot.png" class="person_foot" />
      </div>
    </div>
    <!-- 退款确认 -->
    <div class="tkbox refundbox clmcenter" v-show="refundflag">
      <div class="tk_container clmstart">
        <div class="title">确认退款？</div>
        <div class="tk_infobox">
          <div class="tk_info clmcenter">
            <img src="@/assets/img/icon_refund.png" class="icon_refund" />
            <div class="tk_btnbox">
              <img
                src="@/assets/img/btn_cfm.png"
                class="btn_cfm"
                @click="Refund"
              />
              <img
                src="@/assets/img/btn_cancel.png"
                class="btn_cancel"
                @click="refundflag = false"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改收货地址 -->
    <PostAddr
      :addrInfo="addrInfo"
      :orderid="orderid"
      from="update"
      @submitCall="submitCallBack"
      @closeAddr="updateaddrflag = false"
      v-show="updateaddrflag"
    />
    <!-- 退款审核中 -->
    <Review @close="reviewflag = false" v-show="reviewflag" />
    <!-- 支付状态 -->
    <div class="tkbox pay_status_box clmcenter" v-show="isPay">
      <div class="tk_cont">
        <div class="tk_cont_info clmcenter">
          <img
            :src="
              payStatus === 1
                ? require('@/assets/img/dui.png')
                : require('@/assets/img/cuo.png')
            "
            class="tk_icon"
          />
          <div class="tk_title">
            {{ payStatus === 1 ? "购买成功" : "支付失败" }}
          </div>
        </div>
      </div>
      <img
        src="@/assets/img/close.png"
        class="btn_order"
        @click="isPay = false"
      />
    </div>
    <!-- 核销二维码 -->
    <CareQrcodeVue
      :qrcode="qrcodeText"
      v-show="qrshow"
      @close="qrshow = false"
    />
  </div>
</template>
<script>
import PostAddr from "@/components/PostAddr.vue";
import Review from "@/components/Review.vue";
import CareQrcodeVue from "@/components/CareQrcode.vue";
import { Toast } from "vant";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      orderlist: [], // 产品和礼品
      carelist: [], // 保养套餐
      refundflag: false, // 确认退款弹框
      updateaddrflag: false, // 修改收货地址弹框
      addrInfo: {}, // 收货地址信息
      reviewflag: false, // 退款审核中弹框
      orderid: "", // 订单id
      refund_orderid: "", // 退款订单id
      isPay: false, // 是否支付
      payStatus: 0, // 支付状态
      qrcodeText: "", // 保养 核销内容
      qrshow: false,
      typename: "",
    };
  },
  components: {
    PostAddr,
    Review,
    CareQrcodeVue,
  },
  created() {
    // 获取支付状态
    let paycode = this.$route.query.paycode;
    // console.log(paycode);
    if (paycode == "payok") {
      this.isPay = true;
      this.payStatus = 1;
    } else if (paycode == "payfail") {
      this.isPay = true;
      this.payStatus = 0;
    }
    // 获取订单列表
    this.getorderlist();
    // 获取保养订单
    this.getCareOrderList();
  },
  methods: {
    // 获取订单列表
    getorderlist() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/getUserOrders")
        .then((res) => {
          Toast.clear();
          // console.log(res);
          if (res.data.code == 200) {
            this.orderlist = JSON.parse(JSON.stringify(res.data.data.orders));
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((error) => {
          Toast.clear();
          Toast(error);
        });
    },
    // 保养订单
    getCareOrderList() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/getUserCareGoodsOrders")
        .then((res) => {
          Toast.clear();
          // console.log(res);
          if (res.data.code == 200) {
            this.carelist = JSON.parse(JSON.stringify(res.data.data.orders));
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((error) => {
          Toast.clear();
          Toast(error);
        });
    },
    // 退款确认
    toRefund(id, status, typename) {
      this.refund_orderid = id;
      this.typename = typename;
      if (status == "-1") {
        return Toast("该订单已退款！");
      }
      this.refundflag = true;
    },
    // 退款
    Refund() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      let params = {};
      let posturl = "";
      if (this.typename == "care") {
        posturl = "/refundToCareGoods";
        params = {
          care_id: this.refund_orderid,
        };
      } else {
        posturl = "/refund";
        params = {
          order_id: this.refund_orderid,
        };
      }
      this.$http
        .post(posturl, params)
        .then((res) => {
          Toast.clear();
          // console.log(res);
          if (res.data.code == 200) {
            // Toast("退款申请提交成功！");
            this.refundflag = false;
            this.reviewflag = true;
            this.getorderlist();
            this.getCareOrderList();
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((error) => {
          Toast.clear();
          Toast(error);
        });
    },
    // 修改收货地址
    updateAddr(orderid, name, phone, address) {
      this.orderid = orderid;
      this.addrInfo = {
        name,
        phone,
        address,
      };
      this.updateaddrflag = true;
    },
    // 修改成功
    submitCallBack() {
      this.getorderlist();
      this.updateaddrflag = false;
    },
    // 重新支付
    Pay(orderid, noncestr) {
      // 判断是是否在小程序内打开
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
        wx.miniProgram.getEnv((res) => {
          if (res.miniprogram) {
            //在微信内，在小程序内。
            console.log("小程序的支付业务");
            // let wxJson = {}; // 微信返回的参数
            // 跳转到小程序的支付页面
            wx.miniProgram.navigateTo({
              // url: `/pages/pay/pay?type=${this.payType}&number=${this.number}&goods_id=${this.goods_id}`,
              url: `/pages/pay/pay?orderid=${orderid}&noncestr=${noncestr}&from=order`,
            });
            return;
          } else {
            //在微信内，不在小程序内。
            console.log("微信H5的支付业务");
            return;
          }
        });
      } else {
        //不在微信内。
        console.log("第三方浏览器支付业务");
        return;
      }
    },
    // 保养 核销
    toHx(qrcode) {
      this.qrcodeText = qrcode;
      this.qrshow = true;
    },
  },
};
</script>
<style lang="less" scoped>
.order {
  overflow-y: scroll;
  .ordercontainer {
    width: 100%;
    min-height: 100%;
    height: auto;
    background: url("@/assets/img/bg2.jpg") no-repeat;
    background-size: 100% 100%;
    .orderbox {
      position: relative;
      height: auto;
      margin: 11rem 0 5rem;
      .person_title {
        position: absolute;
        top: 0;
        margin-left: 3px;
      }
      .person_head,
      .person_foot {
        position: relative;
        width: 100%;
        vertical-align: middle;
      }
      .person_head {
        margin-top: 4rem;
      }
      .person_foot {
        margin-top: -1px;
      }
      // 内容区
      .content {
        position: relative;
        z-index: 2;
        width: 678px;
        height: auto;
        margin-top: -1px;
        // background: #e9e8eb url("@/assets/img/squre.png") repeat;
        // background-size: 88px;
        background-color: #e9e8eb;
        border: 10px solid #e6111c;
        box-sizing: border-box;
        border-top-style: none;
        border-bottom-style: none;
        .contentinfo {
          width: 88%;
          margin: 0 auto;
          padding: 2rem 0;
          .title {
            font-size: 3.5rem;
          }
          // 订单列表
          .orderlist {
            width: 100%;
            padding: 1rem 0;
            .order_item {
              width: 583px;
              height: auto;
              background-color: #f7f7f7;
              border: 5px solid #ffffff;
              box-sizing: border-box;
              box-shadow: 0 5px 10px 0px rgba(81, 0, 0, 0.52);
              padding: 1.5rem;
              margin-bottom: 2rem;
              .order_item_cont {
                display: flex;
                justify-content: center;
                align-items: center;
                .order_item_left,
                .order_item_right {
                  height: 100%;
                  display: flex;
                  flex-flow: column nowrap;
                  justify-content: center;
                  align-items: center;
                }
                .order_item_left {
                  width: 37%;
                  .pro_box {
                    position: relative;
                    width: 100%;
                    height: 210px;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    .pro_bg {
                      position: absolute;
                      width: 190px;
                      height: 190px;
                      background: #fbce07;
                      border-radius: 50%;
                    }
                    img {
                      position: relative;
                      z-index: 2;
                      margin-bottom: -0.5rem;
                      width: 190px;
                      height: 210px;
                      object-fit: contain;
                    }
                  }
                }
                .order_item_right {
                  justify-content: flex-start;
                  width: 65%;
                  overflow: hidden;
                  padding-left: 1rem;
                  font-size: 1.6rem;
                  .topt {
                    width: 100%;
                    margin-bottom: 1rem;
                    .topt_title {
                      padding-left: 0.5rem;
                    }
                    .topt_info {
                      width: 100%;
                      background-color: #e8e8e8;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      span {
                        color: #595959;
                        padding: 0 0.5rem;
                      }
                    }
                  }
                  .topt_status {
                    display: flex;
                    .topt_info {
                      flex: 1;
                      span {
                        padding-left: 0.3rem;
                        color: #e6111c;
                      }
                    }
                  }
                }
              }
              // 订单编号
              .order_item_no,
              .order_item_tips {
                p {
                  width: 100%;
                  text-align: left;
                  font-size: 1.6rem;
                  color: #595959;
                  span {
                    color: #e6111c;
                  }
                }
              }
              .order_item_no {
                margin-bottom: 1rem;
              }
              // tips
              .order_item_tips {
                margin-top: 1rem;
              }
              // 操作按钮
              .order_item_btn {
                margin-top: 1.5rem;
                img:last-child {
                  margin-left: 3rem;
                }
              }
            }
            .order_item:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
  // 退款弹窗
  .refundbox {
    .tk_container {
      .tk_infobox {
        .tk_info {
          .tk_btnbox {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              margin: 0 1.5rem;
            }
          }
        }
      }
    }
  }
}
</style>
